<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>Streamedian RTSP player example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="free.player.1.8.4.js"></script>
  </head>
  <body>
    <h3>Streamedian RTSP Player Example using the React framework</h3>
    <div id="root"></div>
    <p><br>Have any suggestions to improve our player? <br>Feel free to leave comments or ideas email: streamedian.player@gmail.com</p>
    <p>View HTML5 RTSP video player log</p>
    <div id="pllogs" class="logs"></div>
    <button class="btn btn-success" onclick="cleanLog(pllogs)">clear</button>
    <button class="btn btn-success" onclick="scrollset(pllogs, true)">scroll up</button>
    <button class="btn btn-success" onclick="scrollset(pllogs, false)">scroll down</button>
    <button id="scrollSetPl" class="btn btn-success" onclick="scrollswitch(pllogs)">Scroll off</button>
    <br/><br/>

    <b>How to use the player in the global network</b>
    <p>
    With an empty license file, you can only watch the stream on your computer locally (intranet).<br/>
    If you would like to stream into the global network please take a key to activate the license.<br/>
    You have personal 1 month validity key in the personal cabinet.<br/>
    To activate key, please, use the activation application that is placed:
    </p>
    <p>
    <b>Windows:</b> C:\Program Files\Streamedian\WS RTSP Proxy Server\activation_app<br/>
    <b>Mac OS:</b> /Library/Application Support/Streamedian/WS RTSP Proxy Server/activation_app<br/>
    <b>Linux (Ubunty, Debian, Centos, Fedora ):</b> /usr/bin/wsp/activation_app<br/>
    </p>
    <p>For more information go to <a href="https://streamedian.com/docs/">documentation</a></p>
    <script>
      var scrollStatPl = true;
      var scrollStatWs = true;
      var pllogs = document.getElementById("pllogs");
      var wslogs = document.getElementById("wslogs");

      // define a new console
      var console=(function(oldConsole){
          return {
              log: function(){
                  oldConsole.log(newConsole(arguments, "black", "#A9F5A9"));
              },
              info: function () {
                  oldConsole.info(newConsole(arguments, "black", "#A9F5A9"));
              },
              warn: function () {
                  oldConsole.warn(newConsole(arguments, "black", "#F3F781"));
              },
              error: function () {
                  oldConsole.error(newConsole(arguments, "black", "#F5A9A9"));
              }
          };
      }(window.console));

      function newConsole(args, textColor, backColor){
          let text = '';
          let node = document.createElement("div");
          for (let arg in args){
              text +=' ' + args[arg];
          }
          node.appendChild(document.createTextNode(text));
          node.style.color = textColor;
          node.style.backgroundColor = backColor;
          pllogs.appendChild(node);
          autoscroll(pllogs);
          return text;
      }

      //Then redefine the old console
      window.console = console;

      function cleanLog(element){
          while (element.firstChild) {
              element.removeChild(element.firstChild);
          }
      }

      function autoscroll(element){
          if(scrollStatus(element)){
              element.scrollTop = element.scrollHeight;
          }
          if(element.childElementCount > 1000){
              element.removeChild(element.firstChild);
          }
      }

      function scrollset(element, state){
          if(state){
              element.scrollTop = 0;
              scrollChange(element, false);
          } else {
              element.scrollTop = element.scrollHeight;
              scrollChange(element, true);
          }
      }

      function scrollswitch(element){
          if(scrollStatus(element)){
              scrollChange(element, false);
          } else {
              scrollChange(element, true);
          }
      }

      function scrollChange(element, status){
          if(scrollStatus(element)){
              scrollStatPl = false;
              document.getElementById("scrollSetPl").innerText = "Scroll on";
          } else {
              scrollStatPl = true;
              document.getElementById("scrollSetPl").innerText = "Scroll off";
          }
      }

      function scrollStatus(element){
          if(element.id === "pllogs"){
              return scrollStatPl;
          } else {
              return scrollStatWs;
          }
      }
    </script>
  </body>
</html>
